<template>
  <div class="content_left">
    <a-button @click="paintOn">
      弯曲
    </a-button>
  </div>
</template>
<script>
import { Button } from 'ant-design-vue';
import Konva from 'konva';
import { mapState, mapMutations} from 'vuex';
export default ({
  components:{
    AButton: Button
  },
  inject: ['pageStage', 'pageLayer'],
  data() {
    return {
      moveCurvature: -1,
      prop: {
        x: 0,
        y: 0,
        innerRadius: 0,
        outerRadius: 0,
        angle: 360,
        fill: 'red',
        stroke: 'black',
        strokeWidth: 0,
        rotation: 180
      }
    }
  },
  computed: mapState({ circle: state => state.circle }),
  methods: {
    ...mapMutations(['changeClassName']),
    // 渲染文字函数
    writeMessage(message, text, layer) {
      text.text(message);
      layer.draw();
    },
    paintOn() {
      const that = this;
      this.changeClassName({className: 'Curvature'})
      const stage = this.pageStage.value;
      const layer = this.pageLayer.value;
      let graph = ''
      let graphLS = ''
      // 切换工具之后  清除之前的所有监听
      stage.off();
      stage.on('contextmenu',function(e) {
        e.evt.preventDefault();
        return;
      })
    //   let NowSelectValue = '';
      // 定义文字的属性
      // let text = new Konva.Text({
      //   x: 10,
      //   y: 10,
      //   fontFamily: 'Calibri',
      //   fontSize: 24,
      //   text: '',
      //   fill: 'black',
      //   name: 'changeClear'
      // });
      let cirlValue = that.circle;
      // 点击弯曲时候查询所有的线段
      stage.find('Arrow').map(item => {
        if( item.attrs.name !== 'changeClear' && item.attrs.classType !== 'Curvature'){
          item.attrs.classType = 'Curvature';
          let Vpoints = item.attrs.points;
          // 计算每个线段的中点,并用圆点进行标记
          cirlValue.x = Math.abs(Vpoints[2] - Vpoints[0]) /2 + Math.abs(Vpoints[0] > Vpoints[2]?Vpoints[2]: Vpoints[0] );
          cirlValue.y = Math.abs(Vpoints[3] - Vpoints[1]) /2 + Math.abs(Vpoints[1] > Vpoints[3]?Vpoints[3]: Vpoints[1]);
          cirlValue.name = 'redCurvature';
          cirlValue.fill = 'red';
          cirlValue.radius = 2
          cirlValue.stroke = 'red';
          cirlValue.id = item._id;
          graph = new Konva.Circle(cirlValue);
          layer.add(graph);
        }
      })
      stage.find('Circle').map(item => {
        item.on('mouseover',function() {
          item.stroke('green');
          item.radius(4)
          layer.batchDraw()
        })
        item.on('mouseout', function() {
          item.stroke('red');
          item.radius(2)
          item.strokeWidth(1);
          layer.batchDraw()
        })
        item.on('mousedown touchstart', function() {
          graphLS = new Konva.Arc(that.prop)
          if(that.moveCurvature === item.attrs.id) {
            that.moveCurvature = '';
          }else {
            that.moveCurvature = item.attrs.id;
          }
        })
      })
      stage.on('mousemove touchmove', function() {
        if(that.moveCurvature !== -1) {
          let moveData = '';
          stage.find('Arrow').map(item => {
            if(item._id === that.moveCurvature) {
              moveData = item
              console.log(moveData.attrs.points)
            }
          })
          stage.find('Circle').map(item => {
            if(item.attrs.id === that.moveCurvature) {
              let dataList = moveData.attrs.points;
              let nowPosition = stage.getPointerPosition();
              let a = { x:dataList[0], y:dataList[1] };
              let b = { x:dataList[2], y:dataList[3] };
              let c = { x:Math.round(nowPosition.x), y:Math.round(nowPosition.y) };
              // 计算移动时候 所画圆的圆心位置和半径长
              let aLs= ( (b.y-a.y )*(c.y*c.y-a.y*a.y+c.x*c.x-a.x*a.x)-(c.y-a.y)*(b.y*b.y-a.y*a.y+b.x*b.x-a.x*a.x))/(2.0*((c.x-a.x)*(b.y-a.y)-(b.x-a.x)*(c.y-a.y)));
              let bLs= ((b.x-a.x)*(c.x*c.x-a.x*a.x+c.y*c.y-a.y*a.y)-(c.x-a.x)*(b.x*b.x-a.x*a.x+b.y*b.y-a.y*a.y))/(2.0*((c.y-a.y)*(b.x-a.x)-(b.y-a.y)*(c.x-a.x)));
              let BJL = Math.sqrt((c.x-aLs) * (c.x-aLs) + (c.y-bLs) * (c.y-bLs))
              that.prop.x = aLs;
              that.prop.y = bLs;
              that.prop.outerRadius = BJL;
              that.prop.innerRadius = BJL - 2;
              // 所选线段的长度
              let ArrowLength = Math.sqrt( (dataList[2]-dataList[0]) * (dataList[2]-dataList[0]) + (dataList[3]-dataList[1]) * (dataList[3]-dataList[1]) );
              // 计算移动的时候  所显示线段的百分比
              let percentage = 360;
              
              let rotation = 0
              // 计算圆旋转的角度
              if( a.x > b.x ){
                if( a.y > b.y ) {
                  rotation = Math.round(180*Math.acos( (a.y - b.y) / ArrowLength )/Math.PI)
                } else {
                  rotation = 90 + Math.round(180*Math.acos( (b.y - a.y) / ArrowLength)/Math.PI)
                }
              }else {
                if( a.y > b.y ) {
                  rotation = 90 + Math.round(180*Math.acos( (a.y - b.y) / ArrowLength)/Math.PI)
                } else {
                  rotation = Math.round(180*Math.acos( (b.x - a.x) /ArrowLength )/Math.PI)
                }
              }
              
              // graphLS.rotation(rotation);
              graphLS.x(aLs);
              graphLS.y(bLs);
              graphLS.outerRadius(BJL);
              graphLS.innerRadius(BJL - 2);
              layer.add(graphLS)
              layer.batchDraw()
              //   x1  >  x2   ||    y1  >  y2    第三象限
              //   x1  >  x2   ||    y1  <  y2    第二象限
              //   x1  <  x2   ||    y1  >  y2    第四象限
              //   x1  <  x2   ||    y1  <  y2    第一象限

              // console.log( Math.acos( (a.y - b.y) / BJL) )
              // console.log(angle)
              // console.log(Math.round(180*Math.asin(0.316)/Math.PI))



            }
          })
        }
      })
      layer.batchDraw()

    }
  }
})
</script>

<style scoped lang="less">

</style>
